{% extends 'base.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="{% static 'assets/select2/select2.css' %}"/>
    <style>
        #editor {
            width: 100%;
            height: 300px;
        }

        .host-link {
            margin-top: 10px
        }

        .host-link .host-tags {
            margin-right: 5px;
            cursor: pointer
        }
    </style>
{% endblock %}
{% block title %}
    添加通用任务
{% endblock %}
{% block page-title %}
    添加通用任务
{% endblock %}
{% block page-content %}
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">添加通用任务</h3>
                </div>
                <div class="panel-body">
                    <form method="post" class="form-horizontal">
                        <div class="form-group web">
                            <label class="col-sm-2 control-label">目标机器：</label>
                            <div class="col-sm-6">
                                <input placeholder="填入IP地址，用英文逗号分隔..." type="text" class="form-control"
                                       id="dest_hosts" name="dest_hosts" autocomplete="off">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label for="" class="col-sm-2 control-label">脚本：</label>
                            <div class="col-sm-6">
                                <div id="editor"></div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">任务概述：</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="name" name="name" autocomplete="off">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary btn-submit" type="button">保存</button>
                                <input class="btn btn-white" type="reset" value="取消">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="{% static 'ace/src/ace.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'ace/src/theme-chrome.js' %}" type="text/javascript" charset="utf-8"></script>
    <script src="{% static 'ace/src/mode-nginx.js' %}"></script>
    <script src="{% static 'ace/src/mode-yaml.js' %}"></script>
    <script src="{% static 'ace/src/ext-language_tools.js' %}"></script>
    <script src="{% static 'assets/select2/select2.min.js' %}" type="text/javascript"></script>
    <script>
        jQuery(".select2").select2({
            width: '100%'
        });
    </script>
    <script>
        var editor = ace.edit("editor");
        //字体大小
        editor.setTheme('ace/theme/chrome');
        editor.session.setMode('ace/mode/yaml');
        editor.setFontSize(18);
        //设置只读（true时只读，用于展示代码）
        editor.setReadOnly(false);
        //自动换行,设置为off关闭
        editor.setOption("wrap", "free");
        //启用提示菜单
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
        });
    </script>
    <script>
        //获取playbookdemo
        function get_playbook_demo() {
            // 第一步：获取到当前input里面的主机id，并存到列表中
            var host = document.getElementById('dest_hosts').value;
            // 第二步：拿到当前脚本内容
            var content = editor.getValue();
            // 第三步：将当前获取的主机ip以及脚本内容传到后端进行处理
            $.ajax({
                type: 'POST',
                'url': '/task/get_playbook/',
                data: {'host': host, 'content': content},
                success: function (result) {
                    console.log(result)
                    // 第四步：请求成功之后，将后端拼接好的playbook写入到我们到脚本框中
                    if (result['code'] === 0) {
                        var content = result['content'];
                        editor.setValue(content);
                    }
                }
            })
        }
        //监听主机变化事件
        $('#dest_hosts').on('change', function () {
            get_playbook_demo();
        });

        //监听提交按钮点击事件
        $('.btn-submit').click(function () {
            var host = document.getElementById('dest_hosts').value;
            var content = editor.getValue();
            var name = $('#name').val();
            if (host.length === 0 || content === '' || name === '') {
                swal({
                    title: '警告',
                    text: '表单不能为空，请填充完整表单!',
                    type: 'warning',
                });
                return false
            }
            $.ajax({
                type: 'POST',
                url: '/task/add/',
                data: {host: host, content: content, name: name},
                success: function (result) {
                    if (result['code'] === 0) {
                        window.location.href = '/task/list/';
                    }
                }
            })
        })
    </script>
    <script>
        $('.task').addClass('active');
        $('.task .general-task-add').addClass('active');
    </script>
{% endblock %}
